<script lang="ts">
  export let label = ''
  export let active = false
</script>

<div class="w-full" class:active={active ? "active":""}>
  <div class="label xl:text-lg text-base 3xl:text-4xl flex justify-center items-center">{label}</div>
  <div class="icon"></div>
</div>

<style>
  .label {
    aspect-ratio: 122/43;
    background-image: url("./label-bg.png");
    vertical-align: middle;
    @apply bg-no-repeat bg-contain text-center text-white align-middle;
  }

  .active .label {
    background-image: url("./label-bg-2.png");
  }

  .icon {
    aspect-ratio: 69/32;
    background-image: url("./icon-1.png");
    @apply bg-no-repeat bg-contain w-full text-center;
  }

  .active .icon {
    background-image: url("./icon-2.png");
  }
</style>
